<script setup lang="ts">
import { computed, onMounted, reactive, ref } from "vue";
import { storeToRefs } from "pinia";
import type { Ref } from "vue";
import type { Category, Brand } from "@/types/homeTypes/homeTypes.ts";
import { ElMessage } from "element-plus";
import useHomeStore from "@/pinia/modules/homeStore/homeStore.ts";
import CategoryItem from "@/views/home/components/Aside/CategoryItem.vue";
import BrandItem from "@/views/home/components/Aside/BrandItem.vue";

const homeStore = useHomeStore();

const { categoryList, brandList }: { categoryList: Ref<Category[]>, brandList: Ref<Brand[]> } = storeToRefs(homeStore);

/*最终使用的分类数据9个分类+1个品牌*/
const brand = reactive({ id: "brand", name: "品牌", children: [{ id: "brand-children", name: "品牌推荐" }] }) as Category;
const asideList = computed<Category[]>(() => {
   const list = categoryList.value.map(cate => ({ id: cate.id, name: cate.name, picture: cate.picture, children: cate.children.slice(0, 2), goods: cate.goods }));
   list.push(brand);
   return list;
});


/*鼠标经过当前分类的ID*/
const categoryId = ref<string>("");
/*鼠标经过一级分类的回调函数*/
const handleEnter = (cate: Category) => {
   categoryId.value = cate.id;
};
/*鼠标离开一级分类的回调函数*/
const handleLeave = (value: string) => {
   categoryId.value = value;
};
/*从asideList分类数组中根据当前鼠标经过的分类ID查找当前分类*/
const currentCategoryList = computed<Category | undefined>(() => asideList.value.find(cate => cate.id === categoryId.value));


/*获取品牌列表的回调函数*/
const fetchBrandList = async () => {
   try {
      await homeStore.fetchBrandList(9);
      brand.brands = brandList.value;
   } catch (error: any) {
      ElMessage.error(error.message);
   }
};

onMounted(() => {
   fetchBrandList();
});
</script>

<template>
   <div class="aside" @mouseleave="handleLeave('')">
      <!--侧边栏-->
      <ul class="menu">
         <el-skeleton animated :count="10" :loading="!categoryList.length">
            <template #template>
               <el-skeleton-item></el-skeleton-item>
            </template>
            <template #default>
               <li :class="{active:cate.id===categoryId}" v-for="(cate) in asideList" :key="cate.id" @mouseenter="handleEnter(cate)">
                  <RouterLink :to="{name:'category',params:{id:cate.id}}">{{ cate.name }}</RouterLink>
                  <RouterLink :to="{name:'subcategory',params:{id:sub.id}}" v-for="(sub) in cate.children">{{ sub.name }}</RouterLink>
               </li>
            </template>
         </el-skeleton>
      </ul>
      <!-- 弹层 -->
      <div class="layer">
         <h4>{{ currentCategoryList?.name }}推荐 <small>根据您的购买或浏览记录推荐</small></h4>
         <ul>
            <category-item :good="good" v-for="(good) in currentCategoryList?.goods" :key="good.id"></category-item>
            <brand-item :brand="brand" v-for="(brand) in currentCategoryList?.brands" :key="brand.id"></brand-item>
         </ul>
      </div>
   </div>
</template>

<style scoped lang="less">
.aside {
   width: 250px;
   height: 500px;
   background: rgba(0, 0, 0, 0.8);
   position: relative;
   z-index: 99;

   .menu {
      .el-skeleton {
         line-height: 50px;

         .el-skeleton__item {
            width: 182px;
            margin-left: 40px;
         }

      }

      li {
         padding-left: 40px;
         height: 50px;
         line-height: 50px;

         &.active {
            background: @xtxColor;
         }

         a {
            margin-right: 4px;
            color: #fff;

            &:first-child {
               font-size: 16px;
            }
         }
      }
   }

   .layer {
      width: 990px;
      height: 500px;
      background: rgba(255, 255, 255, 0.8);
      position: absolute;
      left: 250px;
      top: 0;
      display: none;
      padding: 0 15px;

      h4 {
         font-size: 20px;
         font-weight: normal;
         line-height: 80px;

         small {
            font-size: 16px;
            color: #666;
         }
      }

      ul {
         display: flex;
         flex-wrap: wrap;

      }
   }

   &:hover {
      .layer {
         display: block;
      }
   }
}

</style>
